<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content = "width=device-width, target-densitydpi=high-dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta content="telephone=no" name="format-detection" />
    <meta name="keywords" content="seokeywords"/>
    <meta name="description" content="seodescription"/>
    <title>大灰狼</title>
    <style>
        ul,li{margin:0;padding:0;}
        @media screen and (min-width:240px) {
            html, body{
                font-size:9px;
            }
        }
        @media screen and (min-width:320px) {
            html, body{
                font-size:12px;
            }
        }
        @media screen and (min-width:480px) {
            html, body{
                font-size:18px;
            }
        }
        @media screen and (min-width:640px) {
            html, body{
                font-size:24px;
            }
        }
        @media screen and (min-width:960px) {
            html, body{
                font-size:36px;
            }
        }
        div.imgbox{width:25rem;height:16.5rem;overflow:hidden;margin:0 auto;}
        div.imgbox ul{clear:both;width:75rem;}
        div.imgbox ul li{float:left;width:25rem;height:16.5rem;overflow:hidden;text-align:center;}
        div.imgbox ul li img{width:24rem;height:16.5rem;}
        #page{color:red;}
    </style>
</head>
<body>
<div class="imgbox">
    <ul>
        <li>><img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f3d8533e.jpg"></img></li>
        <li><img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f23aad06.jpg"></img></li>
        <li><img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f345282b.jpg"></img></li>
    </ul>
</div>
<div>这里通过回调显示当前滚动到多少页:<span id="page">0</span></div>
<script src="http://zeptojs.com/zepto.min.js"></script>
<script src="./lib/mggScrollImg.js"></script>
<script>
    (function(){
        /*
         注意：$.mggScrollImg返回的scrollImg对象上有
         next，prev，go三个方法，可以实现外部对滚动索引的控制。
         如：scrollImg.next();//会切换到下一张图片
         scrollImg.go(0);//会切换到第一张图片
         */
        var scrollImg = $.mggScrollImg('.imgbox ul',{
            loop : true,//循环切换
            auto : true,//自动切换
            callback : function(ind){//这里传过来的是索引值
                $('#page').text(ind+1);
            }
        });
    })()
</script>
</body>
</html>